import { withI18n } from '@lingui/react'
import { DatePicker, Form, Input, Modal, Select } from 'antd'
import PropTypes from 'prop-types'
import React, { PureComponent } from 'react'
const Option = Select.Option

@withI18n()
@Form.create()
class CreateModal extends PureComponent {
  state = {}
  handleOk = () => {
    const { onCreate, form } = this.props
    form.validateFieldsAndScroll((err, values) => {
      let filtervalues = {
        ...values,
        PublishTime: values['PublishTime'].format('YYYY-MM-DD'),
      }
      if (!err) {
        console.log('Received values of form: ', filtervalues)
      }
      onCreate(filtervalues)
    })
  }

  render() {
    const {
      form,
      createloading,
      onCreate,
      FirmwareVersions,
      i18n,
      projects,
      ...modalProps
    } = this.props
    const { getFieldDecorator } = form
    const formItemLayout = {
      labelCol: {
        xs: { span: 8 },
        sm: { span: 8 },
        md: { span: 8 },
        lg: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 10 },
        sm: { span: 10 },
        md: { span: 10 },
        lg: { span: 10 },
      },
    }

    // projects.splice(projects.indexOf("recycle"), 1);
    let finalprojects = projects.filter(
      item => item && item.objectId !== 'all' && item.objectId !== 'recycle'
    )
    // projects.slice(1, projects.length);
    return (
      <Modal
        {...modalProps}
        closable={true}
        keyboard={false}
        confirmLoading={createloading}
        okText={i18n.t`Confirm`}
        onOk={this.handleOk}
      >
        <Form {...formItemLayout}>
          <Form.Item label={i18n.t`DeviceName`}>
            {getFieldDecorator('DeviceName', {
              rules: [
                {
                  required: true,
                  message: i18n.t`Please input your Device Name`,
                },
              ],
            })(<Input />)}
          </Form.Item>
          <Form.Item label={i18n.t`Device IMEI`}>
            {getFieldDecorator('Imei', {
              rules: [
                {
                  required: true,
                  message: i18n.t`Please input your Device Name`,
                },
              ],
            })(<Input />)}
          </Form.Item>
          <Form.Item label={i18n.t`Responsible Person`}>
            {getFieldDecorator('Charge', {
              rules: [
                {
                  required: true,
                  message: i18n.t`Please input your Responsible Person`,
                },
              ],
            })(<Input />)}
          </Form.Item>
          <Form.Item label={i18n.t`Device Subordinate Project`}>
            {getFieldDecorator('BelongProject', {
              rules: [
                {
                  required: true,
                  message: i18n.t`Please choose Device Subordinate Project`,
                },
              ],
            })(
              <Select>
                {finalprojects.map(item => (
                  <Option value={item.objectId}>{item.ProjectName}</Option>
                ))}
              </Select>
            )}
          </Form.Item>
          <Form.Item label={i18n.t`Firmware Version`}>
            {getFieldDecorator('FirmwareVersion', {
              rules: [
                {
                  required: true,
                  message: i18n.t`Please input your Firmware Versions`,
                },
              ],
            })(
              <Select>
                {FirmwareVersions.map(item => (
                  <Option value={item}>{item}</Option>
                ))}
              </Select>
            )}
          </Form.Item>
          <Form.Item label={i18n.t`Date of production`}>
            {getFieldDecorator('PublishTime', {
              rules: [
                {
                  required: true,
                  message: i18n.t`Please input your Responsible Person`,
                },
              ],
            })(<DatePicker format={'YYYY-MM-DD'} />)}
          </Form.Item>
        </Form>
      </Modal>
    )
  }
}

CreateModal.propTypes = {
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default CreateModal
